<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器的使用</title>
</head>
<body>
    <div id="app">
        <p>============日常操作==================</p>
        <p>苹果价格 :{{price1/100}} 元/斤</p>
        <p>香蕉价格 :{{price2/100}} 元/斤</p>
        <p>梨子价格 :{{price3/100}} 元/斤</p>
        <p>草莓价格 :{{price4/100}} 元/斤</p>
        <p>=============使用方法操作=================</p>
        <!-- 使用方法实现 -->
        <p>苹果价格 :{{pricemethod(price1)}} 元/斤</p>
        <p>香蕉价格 :{{pricemethod(price2)}} 元/斤</p>
        <p>梨子价格 :{{pricemethod(price3)}} 元/斤</p>
        <p>草莓价格 :{{pricemethod(price4)}} 元/斤</p>
        <p>=============使用过滤器操作[全局和局部的差异]=================</p>
        <p>苹果价格 :{{price1 | format("元/斤")}} 元/斤</p>
        <p>香蕉价格 :{{price2 | formatPrice}} 元/斤</p>
        <p>梨子价格 :{{price3 | format("元/斤")}} 元/斤</p>
        <p>草莓价格 :{{price4 | formatPrice}} 元/斤</p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <script type="text/javascript">
        //全局过滤器
        Vue.filter('formatPrice',function(p){
            //console.log(p); 
            return (p/100).toFixed(2);
        })
        new Vue({
            el:'#app',
            data:{
                price1:1888,
                price2:1668,
                price3:1778,
                price4:1998,
            },
            methods:{
                pricemethod(p){
                    //toFixed(2)保留两位小数
                    return (p/100).toFixed(2);
                }
            },
            //局部过滤器
            filters: {
                format(p,m){
                    return '$'+(p/100).toFixed(2)+m;
                }
            }
        })
    </script>
</body>
</html>